<!--
 * @Author: zi.yang
 * @Date: 2021-10-01 22:32:21
 * @LastEditors: zi.yang
 * @LastEditTime: 2021-10-03 22:09:04
 * @Description: messgae
 * @FilePath: \ziYangPM\src\components\PmPopup\PmMessage\Alert.vue
-->
<template>
  <div class="pm-alert-box" :style="{ top: top + 'px' }">
    <transition enter-active-class="animated slideInDown" leave-active-class="animated slideOutUp">
      <b-alert :show="show" :variant="variant">
        <div class="iq-alert-icon">
          <i class="icon" :class="variantIcon"></i>
        </div>
        <div class="iq-alert-text">{{ message }}</div>
      </b-alert>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Message',
  data () {
    return {
      message: '',
      variant: 'success',
      show: false,
      top: '-20'
    }
  },
  computed: {
    variantIcon () {
      const iconMap = {
        success: 'ri-checkbox-circle-fill',
        info: 'ri-information-fill',
        danger: 'ri-close-circle-fill',
        wraning: 'ri-error-warning-fill'
      }
      return iconMap[this.variant]
    }
  }
}
</script>

<style lang="scss">
  @import url("~@/assets/css/custom.css");
  .pm-alert-box {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    height: 51px;

    .iq-alert-icon {
      padding: 0 0.7rem 0 0 !important;
      .icon {
        font-size: 1.6rem !important;
      }
    }
  }
</style>
